<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form
            ref="wdzhform"
            :rules="rules"
            :model="wdzhform"
            label-width="100px"
            class="flex"
          >
            <el-form-item label="所属网点" prop="networkNameId">
              <el-select
                v-model="wdzhform.networkNameId"
                placeholder="请选择网点"
                style="width: 286px"
              >
                <el-option
                  v-for="(item, index) in wdzhnetworkList"
                  :key="index"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="时间范围">
              <el-switch
                v-model="wdzhstatus"
                style="margin-right: 10px"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="月"
                inactive-text="日"
                @change="changestas"
              />
              <el-date-picker
                v-if="wdzhstatus == false"
                v-model="Time"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 300px"
                @change="wdzhtime"
              />
              <el-date-picker
                v-if="wdzhstatus == true"
                v-model="wdzhform.month"
                value-format="yyyy-MM"
                type="month"
                placeholder="选择月"
                style="width: 300px"
              />
            </el-form-item>
            <el-form-item>
              <el-button class="cx" @click="wdzhcx">查询</el-button>
              <elbutton :obj="wdzhform" @dj="wdzhcz" />
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="page">
          当前页共<span>{{ wdzhtableData.length }}</span
          >项
        </div>
      </el-col>
      <el-col :span="2">
        <div>
          <el-button class="cx">查询</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="24">
        <elltable
          :loading="wdzhloading"
          :data="wdzhtableData"
          :th="wdzhth"
          :n="3"
        />
      </el-col>
    </el-row>
    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination
        :current-page="wdzhform.pageDate.pageNum"
        :page-size="wdzhform.pageDate.pageSize"
        :total="wdzhtotal"
        @size-change="wdzhhandleSizeChange"
        @current-change="wdzhhandleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { getOutletsList } from '@/api/dashboard'
import { Getwdzhtable } from '@/api/site'
export default {
  props: {
    zhtype: Array,
    rules: Object
  },
  data() {
    return {
      Time: [],
      wdzhstatus: false,
      wdzhkmlist: [],
      wdzhnetworkList: [],
      wdzhloading: false,

      // 我的账户
      wdzhform: {
        endTime: '',
        month: '',
        networkNameId: '辽宁盘锦公司',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '',
        timeType: 1
      },
      wdzhtableData: [],
      wdzhtotal: 0,
      wdzhth: []
    }
  },
  async created() {
    this.getOutLet()
  },
  methods: {
    // 状态改变
    changestas(val) {
      // console.log(val)
      this.wdzhform.startTime = ''
      this.wdzhform.endTime = ''
      this.wdzhform.month = ''
      this.Time = []
      if (val) {
        this.wdzhform.timeType = 2
      } else {
        this.wdzhform.timeType = 1
      }
    },
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.wdzhnetworkList = res.data
        }
      })
    },
    // 获取时间
    wdzhtime(value) {
      if (value != null) {
        this.wdzhform.startTime = value[0]
        this.wdzhform.endTime = value[1]
      } else {
        this.wdzhform.startTime = ''
        this.wdzhform.endTime = ''
      }
    },
    // handleClick(tab, event) {
    //   console.log(tab, event)
    // },
    async wdzhcx() {
      this.$refs.wdzhform.validate(async valid => {
        if (valid) {
          if (this.wdzhform.startTime === '' && this.wdzhform.month === '') {
            this.$message('请选择选择时间')
            return
          }
          this.wdzhloading = true
          const res = await Getwdzhtable(this.wdzhform)
          // console.log('下载管理查询', res)
          this.wdzhloading = false
          if (res.code === 200) {
            this.wdzhtableData = res.data.list.data
            this.wdzhtotal = res.data.list.total
            this.wdzhth = res.data.fields
          } else {
            this.wdzhtableData = []
            this.wdzhtotal = 0
          }
        } else {
          return false
        }
      })
    },
    wdzhhandleSizeChange(val) {
      this.wdzhform.pageDate.pageSize = val
      this.wdzhform.pageDate.pageNum = 1
      this.wdzhcx()
    },
    wdzhhandleCurrentChange(val) {
      this.wdzhform.pageDate.pageNum = val
      this.wdzhcx()
    },
    // 重置
    wdzhcz(aaa) {
      this.wdzhform = aaa
      this.Time = []
    }
  }
}
</script>
<style lang="scss" scoped>
@import url('../css/css.css');
</style>
